import { useState } from 'react';
import { LayoutDashboard, Database, Map, Users, Menu, X } from 'lucide-react';
import { Dashboard } from './components/Dashboard';
import { DataView } from './components/DataView';
import { FloorMap } from './components/FloorMap';
import { CleanerManagement } from './components/CleanerManagement';
import { Button } from './components/ui/button';

type Page = 'dashboard' | 'data' | 'map' | 'cleaners';

export default function App() {
  const [currentPage, setCurrentPage] = useState<Page>('dashboard');
  const [sidebarOpen, setSidebarOpen] = useState(false);

  const navigation = [
    { id: 'dashboard' as Page, name: '数据总览', icon: LayoutDashboard },
    { id: 'data' as Page, name: '数据管理', icon: Database },
    { id: 'map' as Page, name: '楼层平面图', icon: Map },
    { id: 'cleaners' as Page, name: '保洁员管理', icon: Users },
  ];

  const renderPage = () => {
    switch (currentPage) {
      case 'dashboard':
        return <Dashboard />;
      case 'data':
        return <DataView />;
      case 'map':
        return <FloorMap />;
      case 'cleaners':
        return <CleanerManagement />;
      default:
        return <Dashboard />;
    }
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 顶部导航栏 */}
      <header className="bg-white border-b border-gray-200 fixed top-0 left-0 right-0 z-30">
        <div className="flex items-center justify-between px-4 h-16">
          <div className="flex items-center gap-4">
            <Button
              variant="ghost"
              size="icon"
              className="lg:hidden"
              onClick={() => setSidebarOpen(!sidebarOpen)}
            >
              {sidebarOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
            </Button>
            <div>
              <h1 className="text-lg">工业保洁监控系统</h1>
              <p className="text-sm text-gray-500 hidden sm:block">Industrial Cleaning Monitoring System</p>
            </div>
          </div>
          <div className="flex items-center gap-4">
            <div className="text-right hidden sm:block">
              <p className="text-sm">管理员</p>
              <p className="text-xs text-gray-500">2025-10-21 14:30</p>
            </div>
          </div>
        </div>
      </header>

      {/* 侧边栏 */}
      <aside
        className={`fixed top-16 left-0 bottom-0 w-64 bg-white border-r border-gray-200 transform transition-transform duration-200 z-20 ${
          sidebarOpen ? 'translate-x-0' : '-translate-x-full'
        } lg:translate-x-0`}
      >
        <nav className="p-4 space-y-2">
          {navigation.map((item) => {
            const Icon = item.icon;
            const isActive = currentPage === item.id;
            return (
              <button
                key={item.id}
                onClick={() => {
                  setCurrentPage(item.id);
                  setSidebarOpen(false);
                }}
                className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
                  isActive
                    ? 'bg-blue-50 text-blue-600'
                    : 'text-gray-700 hover:bg-gray-50'
                }`}
              >
                <Icon className="w-5 h-5" />
                <span>{item.name}</span>
              </button>
            );
          })}
        </nav>
      </aside>

      {/* 遮罩层 (移动端) */}
      {sidebarOpen && (
        <div
          className="fixed inset-0 bg-black bg-opacity-50 z-10 lg:hidden"
          onClick={() => setSidebarOpen(false)}
        />
      )}

      {/* 主内容区 */}
      <main className="pt-16 lg:pl-64">
        <div className="p-4 md:p-6 lg:p-8">
          {renderPage()}
        </div>
      </main>
    </div>
  );
}
